<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>mock数据管理系统</title>
		<link rel="icon" href="favicon.ico">
		<!-- import CSS -->
		<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
		<link rel="stylesheet" type="text/css" href="./css/index.css" />
	</head>
	<body>
		<div id="app">
			<el-container class="container">
				<el-header class="header">
					<div class="header_logo">
						<img src="./img/mock_icon.png">
						<h1>mock数据管理系统</h1>
						<div class="project_box">
							<h4>所属项目：</h4>
							<el-select v-model="projectId" placeholder="请选择" size="mini" @change="inittable">
								<el-option
									v-for="item in projectOptions"
									:key="item.id"
									:label="item.name"
									:value="item.id">
									<div class="project_item">
										<span>{{item.name}} | {{item.value}}</span>
										<i class="el-icon-delete" @click.stop="handleProjectDel(item)"></i>
									</div>
								</el-option>
							</el-select>
							<el-popover
							placement="right"
							width="400"
							title="添加项目"
							trigger="click">
								<!-- <el-table :data="gridData">
									<el-table-column width="150" property="date" label="日期"></el-table-column>
									<el-table-column width="100" property="name" label="姓名"></el-table-column>
									<el-table-column width="300" property="address" label="地址"></el-table-column>
								</el-table> -->
								<el-form :model="projectRuleForm" status-icon :rules="projectRules" ref="projectRuleForm" label-width="100px">
									<el-form-item label="项目名" prop="name">
										<el-input v-model="projectRuleForm.name"></el-input>
									</el-form-item>
									<el-form-item label="接口标识" prop="value">
										<el-input v-model="projectRuleForm.value"></el-input>
									</el-form-item>
									<el-form-item>
										<el-button type="primary" @click="projectSubmitForm('projectRuleForm')">提交</el-button>
										<el-button @click="resetForm('projectRuleForm')">重置</el-button>
									</el-form-item>
								</el-form>
								<el-button slot="reference" style="margin-left: 4px;" type="primary" circle icon="el-icon-plus" size="mini" ></el-button>
							</el-popover>
							
						</div>
					</div>
					<el-button type="primary" icon="el-icon-plus" @click="handleAddMock">添加</el-button>
				</el-header>
				<el-main class="main">
					<el-table :data="tableData" border style="width: 100%;min-height: 100%;" v-loading="loading">
						<el-table-column fixed prop="id" label="id" width="50">
						</el-table-column>
						<el-table-column prop="path" label="path地址">
						</el-table-column>
						<el-table-column prop="method" label="请求方式" width="100">
						</el-table-column>
						<el-table-column prop="successMessage" label="成功信息">
							<template slot-scope="scope">
								<span class="table_td">{{JSON.parse(scope.row.successMessage)}}</span>
							</template>
						</el-table-column>
						<el-table-column prop="errorMessage" label="失败信息">
							<template slot-scope="scope">
								<span>{{JSON.parse(scope.row.errorMessage)}}</span>
							</template>
						</el-table-column>
						<el-table-column fixed="right" label="操作" width="200" align="center">
							<template slot-scope="scope">
								<el-button type="text" icon="el-icon-sort" @click="handleClickTest(scope.row)">测试</el-button>
								<el-button type="text" icon="el-icon-edit" @click="handleClickPut(scope.row)">编辑</el-button>
								<el-button @click="handleClickDelete(scope.row)" type="text" icon="el-icon-delete">删除</el-button>
							</template>
						</el-table-column>
					</el-table>
				</el-main>
				<el-footer class="footer">李大哥写的@mock系统 加油奥利给</el-footer>
			</el-container>
			<!-- 添加、编辑 -->
			<el-dialog :visible.sync="visible" :title="dialogTitle" width="520px">
				<el-form :model="mockForm" :rules="rules" ref="mockForm" label-width="100px" class="demo-ruleForm">
					<el-form-item label="所属项目" prop="projectId">
						<!-- <el-input v-model.number="mockForm.projectId"></el-input> -->
						<el-select v-model="mockForm.projectId" placeholder="请选择">
							<el-option
								v-for="item in projectOptions"
								:key="item.id"
								:label="item.name"
								:value="item.id">
							</el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="path地址" prop="path">
						<el-input v-model.number="mockForm.path"></el-input>
					</el-form-item>
					<el-form-item label="请求方式">
						<!-- <el-select v-model="mockForm.method" filterable placeholder="请选择">
							<el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
						</el-select> -->
						<el-radio-group v-model="mockForm.method">
							<el-radio v-for="item in options" :key="item.value" :label="item.value">{{item.label}}</el-radio>
						  </el-radio-group>
					</el-form-item>
					<el-form-item label="成功信息" prop="successMessage">
						<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容" v-model="mockForm.successMessage">
						</el-input>
					</el-form-item>
					<el-form-item label="失败信息" prop="errorMessage">
						<el-input type="textarea" :autosize="{ minRows: 4, maxRows: 8}" placeholder="请输入内容" v-model="mockForm.errorMessage">
						</el-input>
					</el-form-item>
					<div class="dialog_but">
						<el-button type="primary" @click="colseForm">取消</el-button>
						<el-button type="primary" @click="submitForm('mockForm')">提交</el-button>
						<el-button @click="resetForm('mockForm')">重置</el-button>
					</div>
				</el-form>
			</el-dialog>
			<!-- 测试 -->
			<el-drawer
				title="连接成功"
				:visible.sync="drawer">
				<div style="padding: 12px;">
					<p style="padding-bottom:4px;">返回信息：</p>
					<p class="test_message" style="padding: 12px;" v-text="testMessage"></p>
				</div>
			</el-drawer>
		</div>
	</body>
	<!-- import Vue before Element -->
	<script src="https://unpkg.com/vue/dist/vue.js"></script>
	<!-- import JavaScript -->
	<script src="https://unpkg.com/element-ui/lib/index.js"></script>
	<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
	<script>
		let instance = axios.create({
			baseURL: 'http://jizhang.qicp.vip/',
			timeout: 45000,
		});
		// 添加请求拦截器
		instance.interceptors.request.use(function(config) {
			// 在发送请求之前做些什么
			return config;
		}, function(error) {
			// 对请求错误做些什么
			return Promise.reject(error);
		});

		// 添加响应拦截器
		instance.interceptors.response.use(function(response) {
			// 对响应数据做点什么
			let _response = response.data
			return _response;
		}, function(error) {
			// 对响应错误做点什么
			return Promise.reject(error);
		});
		new Vue({
			el: '#app',
			data: function() {
				return {
					url: {
						query: "/api/mock/query",
						add: "/api/mock/add",
						put: "/api/mock/put",
						del: "/api/mock/delete/",
						projectQue:"/project/mock/query",
						projectAdd:"/project/mock/add",
						projectDel:"/project/mock/delete/"
					},
					visible: false,
					loading: false,
					dialogTitle: "",
					isDialog:1,//1 添加 2编辑
					tableData: [],
					mockForm: {
						projectId:1,
						path: "",
						method: "get",
						successMessage: "{\n    \"errorCode\":\"\",\n    \"errorMessage\":\"\",\n    \"result\":true,\n    \"data\":null\n}",
						errorMessage: "{\n    \"errorCode\":\"\",\n    \"errorMessage\":\"请求失败\",\n    \"result\":false,\n    \"data\":null\n}"
					},
					rules: {
						path: [{
							required: true,
							message: 'path地址不能为空！'
						}],
						successMessage: [{
							required: true,
							message: '成功信息不能为空！'
						}],
						errorMessage: [{
							required: true,
							message: '失败信息不能为空！'
						}]
					},
					options: [{
						value: 'get',
						label: 'get'
					}, {
						value: 'post',
						label: 'post'
					}, {
						value: 'put',
						label: 'put'
					}, {
						value: 'delete',
						label: 'delete'
					}],
					drawer:false,
					testMessage:"",
					projectId:1,//项目id
					projectOptions:[],//项目选项
					projectRuleForm:{
						name:"",
						value:""
					},
					projectRules:{
						name: [{
							required: true,
							message: '项目名不能为空！'
						}],
						value: [{
							required: true,
							message: '接口标识不能为空！'
						},{
							validator: function(rule, value, callback) {
							//  校验英文的正则
							if (/[a-zA-z]$/.test(value) == false) {
								callback(new Error("请输入英文"));
							} else {
								//校验通过
								callback();
							}
							},
							trigger: "blur"
						}]
					}
				}
			},
			mounted() {
				this.initProject();
				this.inittable();
			},
			methods: {
				//初始化表单
				inittable() {
					this.loading = true;
					instance.get(this.url.query+`?projectId=${this.projectId}`).then(res => {
						if (res.result) {
							this.tableData = res.data
						} else {
							this.tableData = [];
						}
						this.loading = false;
					}).catch(err => {
						this.loading = false;
						console.log(err);
					});
				},
				//添加
				handleAddMock() {
					this.dialogTitle = "添加";
					this.isDialog=1;
					this.visible = true;
					this.mockForm.projectId=this.projectId;
				},
				//编辑
				handleClickPut(e){
					this.dialogTitle = "编辑";
					this.isDialog=2;
					this.mockForm={
						id:e.id,
						projectId:e.projectId,
						path:e.path,
						method:e.method,
						successMessage:JSON.parse(e.successMessage),
						errorMessage: JSON.parse(e.errorMessage)
					};
					this.visible = true;
				},
				//表单校验
				submitForm(formName) {
					this.$refs[formName].validate((valid) => {
						if (valid) {
							let _data = { ...this.mockForm };
							if(this.isDialog==1){
								this.addForm(_data)
							}else{
								this.putForm(_data)
							}
						} else {
							console.log('error submit!!');
							return false;
						}
					});
				},
				//添加提交
				addForm(data){
					instance.post(this.url.add, data).then(res => {
						if (res.result) {
							this.$message.success("添加成功！")
							this.inittable();
							this.colseForm()
						} else {
							this.$message.error(res.errorMessage || "添加失败！")
						}
					}).catch(err => {
						this.$message.error(err.errorMessage || "添加失败！")
					})
				},
				//编辑提交
				putForm(data){
					instance.put(this.url.put, data).then(res => {
						if (res.result) {
							this.$message.success("编辑成功！")
							this.inittable();
							this.colseForm()
						} else {
							this.$message.error(res.errorMessage || "编辑失败！")
						}
					}).catch(err => {
						this.$message.error(err.errorMessage || "编辑失败！")
					})
				},
				//关闭
				colseForm() {
					this.mockForm = {
						path: "",
						method: "get",
						successMessage: '{errorCode: "",errorMessage: "",result: true,data: null}',
						errorMessage: '{errorCode: "",errorMessage: "请求失败",result: false,data: null}'
					};
					this.visible = false;
					this.resetForm('mockForm');
				},
				//重置
				resetForm(formName) {
					this.$refs[formName].resetFields();
					if(formName=="projectRuleForm"){
						this.mockForm.projectId=this.projectId;
					}
				},
				//删除
				handleClickDelete(e) {
					this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						instance.delete(`${this.url.del}${e.id}`).then(res => {
							if (res.result) {
								this.$message.success("删除成功！");
								this.inittable();
							} else {
								this.$message.error(res.errorMessage || "删除失败！")
							}
						}).catch(err => {
							this.$message.error(err.errorMessage || "删除失败！")
						})
					}).catch(() => {
						this.$message.info('已取消删除');
					});
				},
				//测试
				handleClickTest(e){
					var _projectId=e.projectId;
					var _projectKey=this.projectOptions.filter(item=>item.id==_projectId)[0].value;
					instance[e.method](`/${_projectKey}${e.path}`).then(res=>{
						this.drawer=true;
						this.testMessage=res;
					}).catch(err=>{
						this.$message.info("连接失败")
					})
				},
				//查询项目
				initProject(){
					instance.get(this.url.projectQue).then(res=>{
						if(res.result){
							this.projectOptions=res.data;
						}
					})
				},
				//添加项目
				projectSubmitForm(formName) {
					this.$refs[formName].validate((valid) => {
					if (valid) {
						instance.post(this.url.projectAdd, this.projectRuleForm).then(res => {
							if (res.result) {
								this.$message.success("添加成功！")
								this.initProject();
								this.resetForm("projectRuleForm")
							} else {
								this.$message.error(res.errorMessage || "添加失败！")
							}
						}).catch(err => {
							this.$message.error(err.errorMessage || "添加失败！")
						})
					} else {
						return false;
					}
					});
				},
				//删除项目
				handleProjectDel(e){
					this.$confirm('此操作将永久删除该项目, 是否继续?', '提示', {
						confirmButtonText: '确定',
						cancelButtonText: '取消',
						type: 'warning'
					}).then(() => {
						instance.delete(`${this.url.projectDel}${e.id}`).then(res=>{
							if(res.result){
								this.$message.success("删除成功!");
								this.initProject()
							}else{
								this.$message.error(res.errorMessage || "删除失败！")
							}
						}).catch(err=>{
							this.$message.error(err.errorMessage || "删除失败！")
						})
					}).catch(() => {
						this.$message({
							type: 'info',
							message: '已取消删除'
						});          
					});
				}
			},
		})
	</script>
</html>
